<template>
	<view>
		<u-navbar title="名店圈" :safeAreaInsetTop="false"></u-navbar>
		<view style="padding: 20rpx;">
			<view class="u-nav-slot" slot="left">
				<view class="row-center">
					<view>青岛市</view>
					<u-icon name="arrow-down" size="16" style="margin-left: 10rpx;"></u-icon>
				</view>

			</view>

			<u-swiper :list="list1" @click="click" style="margin-top: 90rpx;" @change="e => current = e.current"
				indicator indicatorMode="line">

				<view slot="indicator" class="row">
					<view :height="300" v-for="(item, index) in list1" :key="index"
						:class="index==current?'dot-y':'dot'">
					</view>
				</view>
			</u-swiper>

			<image src="/static/images/home_1.png" mode="widthFix" class="desc"></image>

			<view class="item1 col" @click="goExample()">
				<view class="row">
					<view class="item1-text">唐岛湾</view>
					<view class="item-circle" style="margin-left: 5rpx;">名店圈</view>
					<u-icon name="arrow-right" size="14" style="margin-left: 18rpx;"></u-icon>
				</view>
				<view class="item-desc">最多创业者关注的热门品牌</view>
				<view class="row-center" style="margin-top: 32rpx;">
					<view class="wrapper">
						<view class="col-center" v-for="item,index in 8" @click="goItem(item)">
							<view class="item-box row-center">
								<image class="item-img" src="/static/images/pic.png"></image>
							</view>
							<view class="item-name">茶颜悦色 </view>
						</view>

					</view>
				</view>
			</view>

			<view class="item2 col" style="margin-top: 20rpx;">
				<view class="row">
					<view class="item2-text">唐岛湾</view>
					<view class="item-circle" style="margin-left: 5rpx;">名店圈</view>
					<u-icon name="arrow-right" size="14" style="margin-left: 18rpx;"></u-icon>
				</view>
				<view class="item-desc">最多创业者关注的热门品牌</view>
				<view class="row-center" style="margin-top: 32rpx;">
					<view class="wrapper">
						<view class="col-center" v-for="item,index in 8">
							<view class="item-box row-center">
								<image class="item-img" src="/static/images/pic.png"></image>
							</view>
							<view class="item-name">茶颜悦色 </view>
						</view>

					</view>
				</view>
			</view>

			<view class="zhuli">
				<view class="zhuli-top col">
					<view class="item2-text" style="margin-left: 24rpx;margin-top: 20rpx;">
						主力店铺
					</view>
					<view class="item-desc" style="margin-left: 24rpx;">最多创业者关注的热门品牌</view>
				</view>
				<view class="zhuli-bottom row-between-center">
					<view class="bottom-item col-center" v-for="item in 3">
						<view class="item-box row-center">
							<image class="item-img" src="/static/images/pic.png"></image>
						</view>
						<view class="item-name">茶颜悦色 </view>
					</view>
				</view>
			</view>

			<view class="off-line col">
				<view class="row">
					<image src="/static/images/offline.png" class="off-line-icon"></image>
					<view class="off-line-text">线下活动</view>
				</view>
				<image src="/static/images/offline1.png" class="offline-bg" mode="widthFix" @click="goOffline()"></image>
				<image src="/static/images/offline2.png" class="offline-bg" mode="widthFix"></image>
				<image src="/static/images/offline3.png" class="offline-bg" mode="widthFix"></image>
			</view>

			<view class="all col">
				<view class="row">
					<image src="/static/images/offline.png" class="off-line-icon"></image>
					<view class="off-line-text">本区域内所有商家</view>
				</view>

				<view class="row all-item" v-for="item in 5">
					<image src="/static/images/lucky.png" class="all-img"></image>
				<view class="col" style="margin-left: 20rpx;">
					<view class="all-title">
						港福记粤式烧腊
					</view>
					<view class="row all-bg">
						<image src="/static/images/all_icon.png" class="all-icon"></image>
						<view class="all-desc">
							0糖0脂已然成为一股热潮，越来越0糖0脂已然成为一股热潮，越来越
						</view>
					</view>
				</view>
				</view>
			</view>

		</view>
		<view style="height: 100rpx;"></view>
		<tabbar :tabIndex="0"></tabbar>
	</view>
</template>

<script>
	// import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			// tabbar
		},
		data() {
			return {
				current: 0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad() {
			console.log('onLoadonLoad')
		},
		methods: {
			goItem(item){
				uni.navigateTo({
					url:'/src/pages/user_index/merchant_detail'
				})
			},
			goExample(){
				uni.navigateTo({
					url:'/src/pages/user_index/examples'
				})
			},
			goOffline(){
				uni.navigateTo({
					url:'/src/pages/user_index/offline_activity'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.dot {
		background: white;
		width: 8rpx;
		height: 8rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.dot-y {
		border-radius: 20rpx;
		margin-right: 10rpx;
		background: #fdffc9;
		width: 40rpx;
		height: 8rpx;
	}

	.desc {
		margin-top: 10rpx;
		width: 100%;
	}

	.item1 {
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.80);
		background: linear-gradient(180deg, #FEE1D1 0%, rgba(254, 225, 209, 0.00) 30.73%), #FFF;
	}

	.item2 {
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.80);
		background: linear-gradient(180deg, #D3E2FC 0%, rgba(211, 226, 252, 0.00) 30.73%), #FFF;
	}

	.item1-text {
		color: #EA401D;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx;
		/* 150% */
	}

	.item2-text {
		color: #3B60D3;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx;
		/* 150% */
	}


	.item-circle {
		color: #282828;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx;
		/* 150% */
	}

	.item-desc {
		margin-top: 10rpx;
		color: #6A6B7D;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
	}

	.item-box {
		width: 140rpx;
		height: 140rpx;
		border-radius: 8rpx;
		border: 2rpx solid #D0D4D7;
		background: #FFF;
	}

	.item-name {
		margin-top: 10rpx;
		color: #202430;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.item-img {
		width: 120rpx;
		height: 120rpx;
	}

	.wrapper {
		display: grid;
		grid-template-columns: 140rpx 140rpx 140rpx 140rpx;
		grid-gap: 42rpx;
	}

	.zhuli {
		margin-top: 28rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.zhuli-top {
		background-image: url('/static/images/zhuli.png');
		background-size: 100% 100%;
		height: 204rpx;
	}

	.zhuli-bottom {
		z-index: 99;
		margin-top: -10rpx;
		padding: 24rpx;
		border-radius: 20rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.80);
		background: #FFF;

		.bottom-item {
			width: 200rpx;
			height: 250rpx;
			border-radius: 20rpx;
			background: #F7F8FC;
		}
	}

	.off-line {
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.80);
		background: #FFF;

		.offline-bg {
			margin-top: 20rpx;
			width: 100%;
			border-radius: 20rpx;

		}
	}

	.off-line-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.off-line-text {
		margin-left: 16rpx;
		color: #000;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx;
		/* 150% */
	}

	.all {
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		background: #FFF;

		.all-img {
			flex-shrink: 0;
			width: 108rpx;
			height: 108rpx;
			border-radius: 12rpx;
		}

		.all-title {
			color: #1E2132;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
		}

		.all-desc {
			width: calc(100% - 108rpx - 100rpx);
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
			color: #676C7F;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

		.all-icon {
			margin-top: 10rpx;
			width: 24rpx;
			height: 24rpx;
		}
		.all-bg{
			margin-top: 10rpx;
			height: 48rpx;
			border-radius: 8rpx;
			background: linear-gradient(90deg, #F7F8FC 0%, rgba(247, 248, 252, 0.00) 100%);
		}
		.all-item{
			padding: 37rpx 0;
			border-bottom: 1rpx solid #E6E7EB;
		}
	}
</style>